<template>
	<view class="alert-handling"> 
		<view style="background-color: #FFFFFF;">
			<uni-search-bar v-model="queryParams.params.key" placeholder="搜索" bgColor="#F2F2F2" @blur="inputSearch" />
			<uv-tabs :list="menuList" @click="menuClick">
				<template v-slot:right>
					<view style="padding-left: 4px;" class="search-icon" @tap="toast">
						<image src="../../static/index/筛选.png" mode="scaleToFill" />
					</view>
				</template>
			</uv-tabs>
		</view>
		<view v-if="processList.length !== 0"> 
			<uni-card :title="item.procVars.reportType" :extra="getStatusText(item.processStatus)" :class=[item.processStatus] @click="viewDetail(item)" v-for="(item,index) in processList" :key="index">
				<view class="card_content" v-show=" activeMenu !== '待分派' && item.processStatus == 'running'">当前节点: {{ item.taskName }}</view>
				<view class="card_content">上报位置: {{ item.procVars.reportPosition }}</view>
				<view slot="actions">
					<view class="card_bottom">
						<view class="uni-text-danger">
							<uv-avatar size="20"></uv-avatar>
							<text>{{ item.startUserName }}提交</text>
						</view>
						<view>{{item.procVars.reportTime}}</view>
					</view>
				</view>
			</uni-card>
			<uv-divider v-show="!hasMore" text="到底啦~"></uv-divider>
		</view>
		<view v-else>
			<uv-empty text="暂无数据~" width="260" height="260" textSize="16" textColor="#767a82" icon="../../static/index/暂无内容.png"></uv-empty>
		</view>

		<uv-popup ref="searchPpopup" round="10">
			<view class="popup-header"> 
				<uv-text type="primary" text="重置" align="left" @click="resetSearch"></uv-text>
				<uv-text color="#303133" size="16" text="数据筛选" bold align="center"></uv-text> 
				<uv-text type="primary" text="确定" align="right" @click="confirmSearch"></uv-text>
			</view>
			<view class="popup-content">
				<uni-section title="审批状态" type="line" v-if="activeMenu === '已分派'">
					<uni-data-checkbox mode="tag" v-model="searchForm.state" :localdata="statusList"></uni-data-checkbox>
				</uni-section>
				<uni-section title="上报类型" type="line">
					<uni-data-checkbox mode="tag" v-model="searchForm.reportType" :localdata="typeList"></uni-data-checkbox>
				</uni-section>
				<uni-section title="时间范围" type="line"> 
					<uni-datetime-picker v-model="range" type="daterange" />
				</uni-section>
			</view>
		</uv-popup>
		<custom-tabBar></custom-tabBar>
	</view>
</template>

<script>
import { getTodoList,getFinishedList } from "@/request/index";
export default {
	data() {
		return { 
			range: "",
			searchForm: {}, 
			menuList: [
				{ name: "待分派" },
				{ name: "已分派" },
			],
			statusList: [ 
				{ text: "全部", value: null },
				{ text: "进行中", value: "running" }, 
				{ text: "已完成", value: "completed" }, 
				{ text: "已终止", value: "terminated" }, 
				{ text: "已取消", value: "canceled" }, 
			],
			typeList: [ 
				{ text: "全部", value: null },
				{ text: "设备故障", value: "设备故障" }, 
				{ text: "水情雨情报警", value: "水情雨情报警" }, 
				{ text: "非法活动", value: "非法活动" }, 
				{ text: "生态卫生异常", value: "生态卫生异常" }, 
				{ text: "险情处置", value: "险情处置" },  
			],
			activeMenu: "待分派",
			processList: [],
			queryParams: {
				pageNum: 1,
				pageSize: 10,  
				params: {}
			},
			loading: false, 
        	hasMore: true 
		}
	},
	onShow() {
		this.processList = [];
		this.getList();
	},
	methods: {  
		getStatusText(status) {
			if(this.activeMenu !== "待分派"){ 
				switch (status) {
					case "running":
						return "进行中";
					case "completed":
						return "已完成";
					case "terminated":
						return "已终止";
					case "canceled":
						return "已取消";
					default:
						return "进行中";
				}
			}else{
				return "";
			}
		},

		getList(){
			if (this.loading) return; 
			this.loading = true;  
			let _this = this;
			if(JSON.stringify(this.searchForm) !== '{}'){
				_this.queryParams.params = {...this.searchForm}
				_this.queryParams.state = this.searchForm.state || "";
			} 
			
			if(_this.activeMenu === "待分派"){
				getTodoList({..._this.queryParams}).then(res => {   
					res.rows.forEach(item => {
						this.processList.push({...item,procVars: item.procVars? item.procVars: {}}) 
					});
					this.hasMore = res.rows.length === _this.queryParams.pageSize;  
				}).finally(() => {
					this.loading = false;  
				})
			}else{
				getFinishedList({..._this.queryParams}).then(res => { 
					res.rows.forEach(item => {
						this.processList.push({...item,procVars: item.procVars? item.procVars: {}})
					});
					this.hasMore = res.rows.length === _this.queryParams.pageSize;  
				}).finally(() => {
					this.loading = false;  
				})
			}
		},
		viewDetail(item){   
			this.$store.commit("setFormData", item.procVars);  
			const { procInsId,taskId } = item;
			uni.navigateTo({
				url: `/pages/approvalPage/approvalDetail?activeMenu=${this.activeMenu}&procInsId=${procInsId}&taskId=${taskId}`
			}); 
		},
		confirmSearch(){
			let _this = this; 
			if(_this.range && _this.range.length){
				_this.searchForm.beginTime = _this.range[0] + " 00:00:00";
				_this.searchForm.endTime = _this.range[1] + " 23:59:59"; 
			}
			if(JSON.stringify(_this.searchForm) !== '{}'){
				_this.processList = [];
				_this.$nextTick(()=>{ 
					_this.getList();
				})
			}
			this.$refs.searchPpopup.close();
		},
		toast(){
			this.$refs.searchPpopup.open('bottom'); 
		},
		resetSearch(){
			this.searchForm = {};
			this.range = null;
			this.queryParams = {
				pageNum: 1,
				pageSize: 10,  
				params: {}
			}; 
			this.processList = [];
			this.getList();
		},
		menuClick(item) { 
			this.activeMenu = item.name;
			this.queryParams = {
				pageNum: 1,
				pageSize: 10,  
				params: {}
			}; 
			this.processList = [];
			this.getList();
		},
		inputSearch(){
			this.processList = [];
			this.getList(); 
		},
		loadMore() {  
			if (!this.hasMore || this.loading) return;
			this.queryParams.pageNum += 1;
			this.getList();
		}
	},
	onReachBottom() {  
		this.loadMore();
	}
}
</script>


<style lang="scss">   
/deep/ .running  .uni-card__header .uni-card__header-extra .uni-card__header-extra-text{ 
	color: green;
}
/deep/ .completed  .uni-card__header .uni-card__header-extra .uni-card__header-extra-text{
	color: orange;
}
/deep/ .terminated  .uni-card__header .uni-card__header-extra .uni-card__header-extra-text{
	color: red;
}
.alert-handling{
	/deep/.uni-card__header{
		border-bottom: none !important;
		padding-bottom: 0;
		font-weight: bold;
	}
	/deep/ .uni-card__actions{ 
		padding-bottom: 10px;
	}
	.card_content{
		color: #969696;
	}
	.card_bottom,.uni-text-danger{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.8rem;
		color: #828282;
	}
	.uni-text-danger{
		text{
			padding-left: 0.4rem;
		}
	}

	.search-icon{ 
		padding-top: 10px;
		image{
			width: 1.4rem;
			height: 1.6rem;
			margin-right: 0.4rem;
		}
	}

	.popup-header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem;
		.uv-text{
			text-align: center;
		}
	}

	.popup-content{ 
		padding: 0 1rem 73px 1rem;
		/deep/ .uni-section-header{
			padding-left: 0;
		}
	}
	
}

</style>